import React, { useEffect, useState } from "react";
import { Space, Table, Button, Modal ,Pagination} from "antd";
import { QuestionCircleOutlined } from "@ant-design/icons";
import { connect } from "react-redux";
// import { DownOutlined } from "@ant-design/icons";
import "./list.css";
import axios from "../../../utils/axios";


function List(props) {
  const [total,setTotal] = useState(0) // 总条数
  const [page,setPage] = useState(1)  // 设置默认页码
  const [pageSize,setPageSize] = useState(3)
  function changePage(a,b){
    setPage(a)
    setPageSize(b)
  }

  const [dataarr,setData] = useState([])
  useEffect(()=>{
    console.log("123654");
    axios({
      url:"/gd_manager/gd_table/find_gd",
      params:{
        currentPage:page,
        pageSize:pageSize
      },
    }).then(res=>{
      setTotal(res.data.count);
      setData(res.data.data);
    }).catch(error=>{
      console.log("报错了");
      console.log(error);
    })
  },[page,pageSize])



  const columns = [
    {
      title: "客户名称",
      dataIndex: "customer_name",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "跟单方式",
      dataIndex: "gd_method",
    },
    {
      title: "跟单状态",
      dataIndex: "gd_status",
    },
    {
      title: "跟单对象",
      dataIndex: "gd_object",
    },
    {
      title: "跟单提示",
      dataIndex: "gd_tips",
      render: (_, record) => (
        <Space size="middle">
          <Button type="primary" danger onClick={showModal}>
            <QuestionCircleOutlined /> 待跟单
          </Button>
        </Space>
      ),
    },
    {
      title: "下次联系",
      dataIndex: "next_contact",
    },
    {
      title: "备注",
      dataIndex: "remark",
    },
    {
      title: "跟单人",
      dataIndex: "gd_person",
    },
    {
      title: "跟单时间",
      dataIndex: "gd_time",
    },
    
    {
      title: "管理",
      render: (_, record) => (
        <Space size="middle">
          <a>
            {" "}
            <Button type="primary">修改</Button>
          </a>
          <a>
            {" "}
            <Button type="primary" danger>
              删除
            </Button>
          </a>
        </Space>
      ),
    },
  ];
  const data = [
    {
      key: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      tags: ["nice", "developer"],
    },
  //   {
  //     key: "2",
  //     name: "Jim Green",
  //     age: 42,
  //     address: "London No. 1 Lake Park",
  //     tags: ["loser"],
  //   },
  //   {
  //     key: "3",
  //     name: "Joe Black",
  //     age: 32,
  //     address: "Sidney No. 1 Lake Park",
  //     tags: ["cool", "teacher"],
  //   },
  ];
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <div id="listcssdbx">
      <Table columns={columns} dataSource={dataarr} rowKey={record => record.customer_name} pagination={false}/>
      <>
      <div className="page">
        <Pagination
            total={total}
            showSizeChanger
            showQuickJumper
            size="large"
            defaultPageSize={pageSize}
            showTotal={(total) => `总共 ${total} 条`}
            onChange={changePage}
          />
      </div>
      
        <Modal
          title="新增"
          visible={isModalVisible}
          width={1000}
          onOk={handleOk}
          onCancel={handleCancel}
        ></Modal>
      </>
    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    isShow: state.isShow,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    showDown() {
      const action = { type: "showDown" };
      dispatch(action);
    },
    showUp() {
      const action = { type: "showUp" };
      dispatch(action);
    },
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(List);
